@font-face {
    font-family: 'web_symbolsregular';
    src: url('../font/websymbols-regular-webfont.eot');
    src: url('../font/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/websymbols-regular-webfont.woff') format('woff'),
         url('../font/websymbols-regular-webfont.ttf') format('truetype'),
         url('../font/websymbols-regular-webfont.svg#web_symbolsregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'mistralregular';
    src: url('../font/mistral-webfont.eot');
    src: url('../font/mistral-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/mistral-webfont.woff2') format('woff2'),
         url('../font/mistral-webfont.woff') format('woff'),
         url('../font/mistral-webfont.ttf') format('truetype'),
         url('../font/mistral-webfont.svg#mistralregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


.connect_admin {
margin:auto;
width : 300px;
height : 300px;
background-color : white; 
box-shadow : 0px 0px 30px rgb(150,150,150);

-webkit-animation: apparition 1s; /* Safari 4+ */
  -moz-animation:    apparition 1s; /* Fx 5+ */
  -o-animation:      apparition 1s; /* Opera 12+ */
  animation:         apparition 1s; /* IE 10+ */

}

body {
height:100%;
margin : 0;
padding:0;
background: url('../images/brushed.png'); /*#4b8baf*/
}

html {
    height: 100%;
}

#page-table {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
#page-td {
    height: 100%;
    padding: 0;
    vertical-align: middle;
}



@-webkit-keyframes apparition {
  0%   { opacity: 0; 
  		 -webkit-transform : scale(0);
  		 -moz-transform : scale(0);
  		 -o-transform : scale(0);
  		 transform : scale(0); }
  80%  { -webkit-transform : scale(1.1);
  		 -moz-transform : scale(1.1);
  		 -o-transform : scale(1.1);
  		 transform : scale(1.1); }
  100% { opacity: 1; 
		 -webkit-transform : scale(1);
  		 -moz-transform : scale(1);
  		 -o-transform : scale(1);
  		 transform : scale(1); }
}
@-moz-keyframes apparition {
  0%   { opacity: 0; 
  		 -webkit-transform : scale(0);
  		 -moz-transform : scale(0);
  		 -o-transform : scale(0);
  		 transform : scale(0); }
  80%  { -webkit-transform : scale(1.1);
  		 -moz-transform : scale(1.1);
  		 -o-transform : scale(1.1);
  		 transform : scale(1.1); }
  100% { opacity: 1; 
		 -webkit-transform : scale(1);
  		 -moz-transform : scale(1);
  		 -o-transform : scale(1);
  		 transform : scale(1); }
}
@-o-keyframes apparition {
  0%   { opacity: 0; 
  		 -webkit-transform : scale(0);
  		 -moz-transform : scale(0);
  		 -o-transform : scale(0);
  		 transform : scale(0); }
  80%  { -webkit-transform : scale(1.1);
  		 -moz-transform : scale(1.1);
  		 -o-transform : scale(1.1);
  		 transform : scale(1.1); }
  100% { opacity: 1; 
		 -webkit-transform : scale(1);
  		 -moz-transform : scale(1);
  		 -o-transform : scale(1);
  		 transform : scale(1); }
}
@keyframes apparition {
  0%   { opacity: 0; 
  		 -webkit-transform : scale(0);
  		 -moz-transform : scale(0);
  		 -o-transform : scale(0);
  		 transform : scale(0); }
  80%  { -webkit-transform : scale(1.1);
  		 -moz-transform : scale(1.1);
  		 -o-transform : scale(1.1);
  		 transform : scale(1.1); }
  100% { opacity: 1; 
		 -webkit-transform : scale(1);
  		 -moz-transform : scale(1);
  		 -o-transform : scale(1);
  		 transform : scale(1); }
}

.formulaire input {
width : 400px;
height : 30px;
margin-bottom : 10px;
font-size : 15px;
font-family : "Helvetica";
color : #009fe5;
opacity: 1;
text-align : center;

-webkit-animation: app 1.5s; /* Safari 4+ */
  -moz-animation:    app 1.5s; /* Fx 5+ */
  -o-animation:      app 1.5s; /* Opera 12+ */
  animation:         app 1.5s; /* IE 10+ */
}

.formulaire input#submit {
width : 200px;
background-color: #009fe5;
border:none;
color : white;
font-size : 25px;
opacity : 1;

-webkit-animation: app 3s; /* Safari 4+ */
  -moz-animation:    app 3s; /* Fx 5+ */
  -o-animation:      app 3s; /* Opera 12+ */
  animation:         app 3s; /* IE 10+ */
}



.hublot
{

width : 120px;
height : 120px;
border-radius : 0%;
background-color : rgb(240,240,240);
border : 1px solid rgb(220,220,220);
margin:auto;
overflow : hidden;

}

.hublot p {
font-family: 'web_symbolsregular';
font-size : 85px;
color : white;
position : relative;
top : -57px;
}

@-webkit-keyframes app {
  0%   { width:0px; opacity: 0;}
  70%  { width:0px; opacity: 0;}
  100% { width: 200px; opacity: 1;}
}
@-moz-keyframes app {
  0%   { width:0px; opacity: 0;}
  70%  { width:0px; opacity: 0;}
  100% { width: 200px; opacity: 1;}
}
@-o-keyframes app {
  0%   { width:0px; opacity: 0;}
  70%  { width:0px; opacity: 0;}
  100% { width: 200px; opacity: 1;}
}
@keyframes app {
  0%   { width:0px; opacity: 0;}
  70%  { width:0px; opacity: 0;}
  100% { width: 200px; opacity: 1;}
}






/***********
/¨*********** PANNEAU ADMINISTRATION ************:
**************************************************/

.lien_modif {
display : inline-block;
vertical-align:top;
}

.modification {
display : inline-block;
vertical-align:top;
width : 200px;
height : 200px;
background-color : white;
margin : 10px;
box-shadow: 0px 0px 5px rgb(200,200,200);


-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.modification#realisations {
-webkit-animation: apparition 1s backwards; /* Safari 4+ */
  -moz-animation:    apparition 1s backwards; /* Fx 5+ */
  -o-animation:      apparition 1s backwards; /* Opera 12+ */
  animation:         apparition 1s backwards; /* IE 10+ */

}

.modification#blog {
-webkit-animation: apparition 1s 0.5s backwards; /* Safari 4+ */
  -moz-animation:    apparition 1s 0.5s backwards; /* Fx 5+ */
  -o-animation:      apparition 1s 0.5s backwards; /* Opera 12+ */
  animation:         apparition 1s 0.5s backwards; /* IE 10+ */

}

.modification#clients {
-webkit-animation: apparition 1s 1s backwards; /* Safari 4+ */
  -moz-animation:    apparition 1s 1s backwards; /* Fx 5+ */
  -o-animation:      apparition 1s 1s backwards; /* Opera 12+ */
  animation:         apparition 1s 1s backwards; /* IE 10+ */

}

.modification#commentaires {
-webkit-animation: apparition 1s 1.5s backwards; /* Safari 4+ */
  -moz-animation:    apparition 1s 1.5s backwards; /* Fx 5+ */
  -o-animation:      apparition 1s 1.5s backwards; /* Opera 12+ */
  animation:         apparition 1s 1.5s backwards; /* IE 10+ */

}




.panneau {
height : 440px;
width:100%;
margin:auto;
}


.icone {
font-family: 'web_symbolsregular';
font-size : 85px;
color : rgb(150,150,150);
position : relative;
top : 40px;
margin:0;
padding:0;
margin-bottom : 40px;


-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.description_modif {
font-size : 13px;
font-family : "Helvetica";
color : rgb(170,170,170);
padding: 25px;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.modification:hover {
-webkit-transform : scale(1.1);
  		 -moz-transform : scale(1.1);
  		 -o-transform : scale(1.1);
  		 transform : scale(1.1);
}

.modification:hover .icone {
color : #cc0000;


}

.modification:hover .description_modif {
color : #91041b;

}

.rea {
display : inline-block;
vertical-align:top;
width : 200px;
height : 120px;
background-color : white;
margin : 10px;
margin-bottom : 55px;
box-shadow: 0px 0px 5px rgb(100,100,100);

}

img_rea {
width:200px;
height:100px;

}
.panneau_rea {
height : auto;
width:1000px;
margin:auto;

}

.rea p {
font-size : 13px;
font-family : "Helvetica";
color : rgb(120,120,120);
margin-top : 80px;
}

.sup_rea {
display : inline-block;
vertical-align:top;
width:30px;
height :30px;
margin : 10px;
margin-right : 20px;
background-color : transparent;
position : relative;
top : -35px;

-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.sup_rea:hover#sup{
color : #d30002;
}

.sup_rea:hover#mod {
color : #67a752;
}

.rea a {
font-family :  'web_symbolsregular';
text-decoration : none;
font-size : 15px;
color : rgb(100,100,100);
}

.ajj {
font-family:'web_symbolsregular';
font-size:60px; 
color:rgba(100,100,100,0.3); 
line-height : 115px;


-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.rea:hover .ajj{
color : #b8d0d2;
font-size : 70px;
}

h3 {
font-family : 'Helvetica';
font-size : 20px;
color: rgb(30,30,30);
font-weight : light;
}

.formulaire_ajout input {
width : 200px;
height : 30px;
margin-bottom : 10px;
font-size : 15px;
font-family : "Helvetica", Arial;
color : #009fe5;
opacity: 1;
text-align : center;
}

.formulaire_ajout input#submit {
width : 200px;
background-color: #009fe5;
border:none;
color : white;
font-size : 25px;
opacity : 1;

}

.back_website{
	text-decoration : none;
	font-family : "Helvetica", Arial;
	color : rgb(50,50,50);
	background-color : white;
	border-radius:0px;
	padding : 10px;
	position : relative;
	top : 30px;
	
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.back_website:hover {
	color : rgb(255,255,255);
	background-color : #d10107;
	
}